<!DOCTYPE html>
<html lang="en" style="height:100%; width:100%;">
<head>
	<meta charset="UTF-8">
	<title>desk桌面</title>
	<link rel="stylesheet" href="css/debug.css" />
	<link rel="stylesheet" href="css/style.css">
	<link href="css/desk.css" rel="stylesheet" />
	<link rel="stylesheet" href="css/list-menu.css"/>
	<link rel="stylesheet" href="css/section.css">
	<link rel="stylesheet" href="css/toolbar.css"/>
	<link rel="stylesheet" href="css/tabs.css"/>
</head>
<body style="height:100%;">
	<div class="oc-dialog oc-dialog-max" style="background-color:#4C9ED9;">
		<main>
			<div>
				<section  class="oc-desk">
					<figure style="left:1rem;top: 1rem;">
						<img src="http://usr.im/64x64"/>
						<figcaption>iconNanme这里要超出去了哟哟哟哟哟</figcaption>
					</figure>
					<figure style="left:1rem;top: 7rem;">
						<img src="http://usr.im/64x64"/>
						<figcaption>iconNanme</figcaption>
					</figure>
					<figure style="left:1rem;top: 13rem;">
						<img src="http://usr.im/64x64"/>
						<figcaption>iconNanme</figcaption>
					</figure>
					<figure style="left:1rem;top: 20rem;">
						<img src="http://usr.im/64x64"/>
						<figcaption>iconNanme</figcaption>
					</figure>
					<figure style="left:5rem;top: 27rem;">
						<img src="http://usr.im/64x64"/>
						<figcaption>iconNanme这里要超出去了哟哟哟哟哟</figcaption>
					</figure>
					<figure style="left:5rem;top: 1rem;">
						<img src="http://usr.im/64x64"/>
						<figcaption>iconNanme</figcaption>
					</figure>
					<figure style="left:5rem;top: 7rem;">
						<img src="http://usr.im/64x64"/>
						<figcaption>iconNanme</figcaption>
					</figure>
					<figure style="left:5rem;top: 13rem;">
						<img src="http://usr.im/64x64"/>
						<figcaption>iconNanme</figcaption>
					</figure>
					<figure style="left:5rem;top: 20rem;">
						<img src="http://usr.im/64x64"/>
						<figcaption>iconNanme</figcaption>
					</figure>
					<figure style="left:1rem;top: 27rem;">
						<img src="http://usr.im/64x64"/>
						<figcaption>iconNanme</figcaption>
					</figure>
					<div class="oc-dialog" style="
						left: 13rem;
						top: 5rem;
						width:35rem;
						height:24rem;
						box-shadow: 0px 0px 4px 1px rgba(23, 23, 23, 0.5);
					">
						<header>
							<i></i>
							<label>{{title}}</label>
						</header>
						<nav>
							<button>-</button>
							<button>+</button>
							<button class="danger">&times;</button>
						</nav>
						<main>
							<menu class="oc-menu">
								<li>文件(F)
									<ul>
										<li><button>DSpellCheck</button></li>
										<li><button>Explorer</button></li>
										<li><button>MIME Tools</button></li>
										<li><button>Converter</button></li>
										<li><button>NppFTP</button></li>
										<hr />
										<li>Plugin Manager
											<ul>
												<li><button>DSpellCheck</button></li>
												<li><button>Explorer</button></li>
												<li><button>MIME Tools</button></li>
												<li><button>Converter</button></li>
												<li><button>NppFTP</button></li>
												<li><button>Plugin Manager</button></li>
											</ul>
										</li>
									</ul>
								</li>
								<li class="active">编辑(E)
									<ul>
										<li><button>DSpellCheck</button></li>
										<li><button>Explorer</button></li>
										<li><button>MIME Tools</button></li>
										<li><button>Converter</button></li>
										<hr/>
										<li class="sub" disabled><button>NppFTP</button>
											<ul>
												<li><button>DSpellCheck</button></li>
												<li><button>Explorer</button></li>
												<li><button>MIME Tools</button></li>
												<li><button>Converter</button></li>
												<li><button>NppFTP</button></li>
												<li><button>Plugin Manager</button></li>
											</ul>
										</li>
										<hr/>
										<li class="sub">Plugin Manager
											<ul>
												<li><button>DSpellCheck</button></li>
												<li><button>Explorer</button></li>
												<li><button>MIME Tools</button></li>
												<li><button>Converter</button></li>
												<li><button>NppFTP</button></li>
												<li><button>Plugin Manager</button></li>
											</ul>
										</li>
									</ul>
								</li>
								<li>查看(V)
									<ul>
										<li><button>文字</button></li>
										<hr/>
										<li><button>文字</button></li>
										<li><button>MIME Tools</button></li>
										<li><button>Converter</button></li>
										<hr/>
										<li class="sub" disabled><button>NppFTP</button>
											<ul>
												<li><button>DSpellCheck</button></li>
												<li><button>Explorer</button></li>
												<li><button>MIME Tools</button></li>
												<li><button>Converter</button></li>
												<li><button>NppFTP</button></li>
												<li><button>Plugin Manager</button></li>
											</ul>
										</li>
										<hr/>
										<li class="sub">Plugin Manager
											<ul>
												<li><button>DSpellCheck</button></li>
												<li><button>Explorer</button></li>
												<li><button>MIME Tools</button></li>
												<li><button>Converter</button></li>
												<li><button>NppFTP</button></li>
												<li><button>Plugin Manager</button></li>
											</ul>
										</li>
									</ul>
								</li>
								<li>历史(S)</li>
								<li>书签(B)</li>
								<li>工具(T)</li>
								<li>帮助(H)</li>
							</menu>
							<nav class="oc-toolbar">
								<ul class="icon-list">
									<li><i></i></li>
									<li><i></i></li>
									<li class="divider"><i></i></li>
									<li><i></i></li>
									<li><i></i></li>
									<li><i></i></li>
									<li><i></i></li>
									<li><i></i></li>
									<li><i></i></li>
									<li class="divider"><i></i></li>
									<li><i></i></li>
									<li><i></i></li>
									<li><i></i></li>
									<li><i></i></li>
									<li><i></i></li>
									<li><i></i></li>
									<li class="divider"><i></i></li>
									<li><i></i></li>
									<li><i></i></li>
								</ul>
							</nav>
							<div>	
								<div class="sidebar-left">
									左边栏
								</div>
								<section><!--内容区域-->
								<div class="oc-tabs" style="min-width:12rem;">
									<ul><!--标题-->
										<li class="active"><a>常规</a></li>
										<li><a>安全</a></li>
										<li><a>详细信息</a></li>
										<li><a>以前版本</a></li>
									</ul>
									<section class="active1" style="
										height:5rem;
									">tabs2内容区域<span>区域标题1</span></section>
									<section>tabs1内容区域<span>区域标题2</span></section>
									<section>tabs3内容区域<span>区域标题3</span></section>
									<section>tabs4内容区域<span>区域标题4</span></section>
								</div>
								</section>
								<div class="sidebar-right">
									右边栏
								</div>
							</div>
							<footer>
								<p><span>状态提示</span></p>
								<!--状态栏右边的图标-->
								<div class="footer-icon">
									<span><i></i></span>
									<span><i></i></span>
								</div>
							</footer>
						</main>
					</div>
					<div class="oc-dialog " style="
						display:none;
					">
						<header>
							<i></i>
							<label>{{title}}</label>
						</header>
						<nav>
							<button>-</button>
							<button>+</button>
							<button class="danger">&times;</button>
						</nav>
						<main>
							<div>	
								<div class="sidebar-left">
									左边栏
								</div>
								<section>
									section元件区
								</section>
								<div class="sidebar-right">
									右边栏
								</div>
							</div>
							<footer></footer>
						</main>
					</div>
					
				</section>
			</div>
			<nav style="background-color:rgba(255,255,255,0.1)">
				<ul class="oc-taskBar">
					<li><span><i></i>任务名</span></li>
					<li><span><i></i>任务名</span></li>
					<li><span><i></i>任务名hhhgtrgr</span></li>
					<li><span><i></i>任务名</span></li>
					<li><span><i></i>任务gregtryhttuter名ferfre</span></li>
				</ul>
				<div class="footer-icon">
					<span><i></i></span>
					<span><i></i></span>
				</div>
			</nav>
		</main>
	</div>
</body>
</html>